<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="include :: header"></head>
<body>

    <div class="layui-container" style="padding: 20px 20px;">
        <form class="layui-form layui-form-pane" method="post" action="">

            <div class="layui-form-item">
                <label class="layui-form-label">旧密码</label>
                <div class="layui-input-block">
                    <input name="oldPassword" type="password" lay-verify="required"
                           placeholder="" autocomplete="off" class="layui-input"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">新密码</label>
                <div class="layui-input-block">
                    <input name="newPassword" type="password" lay-verify="required|pass"
                           placeholder="" autocomplete="off" class="layui-input"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-block">
                    <input name="confirmPassword" type="password" lay-verify="required|pass"
                           placeholder="" autocomplete="off" class="layui-input"/>
                </div>
            </div>

            <!--/* 按钮组容器 */-->
            <div class="layui-btn-container" style="text-align: center; padding-top: 10px; border: 1px solid #eeeeee;">
                <button type="submit" lay-submit class="layui-btn layui-btn-normal mwj-btn-width" lay-filter="submit-filter">提交</button>
                <button type="button" id="cancel" class="layui-btn layui-btn-normal mwj-btn-width">取消</button>
            </div>
        </form>
    </div>

    <div th:include="include::footer"></div>
    <script type="text/javascript" th:inline="javascript">
        $(function () {
            /* 自定义表单验证 */
            let form = layui.form;
            form.verify({
                pass: function (value, item) {
                    if(!new RegExp("^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$").test(value)){
                        return '密码可以包含数字、字母、下划线，并且要同时含有数字和字母，且长度要在8-16位之间';
                    }
                }
            });

            /* 提交按钮 */
            form.on('submit(submit-filter)', function(data){
                //console.log(data.elem); //被执行事件的元素DOM对象，一般为button对象
                //console.log(data.form); //被执行提交的form对象，一般在存在form标签时才会返回
                //console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
                if(data.field.newPassword != data.field.confirmPassword){
                    mwj.warn("两次密码不一致！");
                    return false;
                }

                $.post('/sys/user/updatePassword', data.field, function (result) {
                    if(result.code == 0){
                        layer.confirm('修改密码成功，请刷新页面重新登录！', {
                            // 不展示右上角的关闭按钮
                            closeBtn: 0
                            // 取消按钮回调事件
                            ,btn2: function(index, layero){
                                layer.close(index);
                                mwj.closeLayer();
                                // 刷新父页面，使重新登录
                                parent.location.reload();

                                //return false 开启该代码可禁止点击该按钮关闭
                            }
                        }, function(index){
                            layer.close(index);
                            mwj.closeLayer();
                            // 刷新父页面，使重新登录
                            parent.location.reload();
                        });
                    } else {
                        mwj.error("操作失败！");
                    }
                });
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });

            mwj.addRedStar();

            $("#cancel").on("click", function () {
                mwj.closeLayer();
            });
        });
    </script>
</body>

</html>